<template>
  <div class="addSpace">
    <!-- 新增空间 -->
    <showBanner class="white"></showBanner>
    <div class="content">
      <el-steps :active='this.activeNum' simple style="margin-top: 20px;width:1000px;">
        <el-step title="基本信息"></el-step>
        <el-step title="图片上传"></el-step>
        <el-step title="设置价格"></el-step>
        <el-step title="配套服务"></el-step>
      </el-steps>
    </div>
    <!-- 基本信息 -->
    <div v-if="this.activeNum===1" style="width:480px;margin:32px auto;">
      <information :spaceInfoform='spaceInfoformList' @next-step='onSelectStep' ></information>
    </div>
    <!-- 图片上传 -->
    <div v-if="this.activeNum===2" style="width:600px;margin:32px auto;">
      <uploadImg :spaceInfoform='spaceInfoformList' @prev-step='onPrevStepScd' @next-step='onNextStepScd'></uploadImg>
    </div>
    <!-- 设置价格 -->
    <div v-if="this.activeNum===3" style="width:480px;margin:32px auto;">
      <setPrice :spaceInfoform='spaceInfoformList' @prev-step='onPrevStepThd' @next-step='onNextStepThr'></setPrice>
    </div>
    <!-- 配套服务 -->
    <div v-if="this.activeNum===4" style="width:480px;margin:32px auto;">
      <supportService :spaceInfoform='spaceInfoformList' @prev-step='onPrevStepFou' @next-step='addSpace'></supportService>
    </div>
    <!-- <div class="containor">
      <div class="padding-box">
        <el-tabs  v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="1">
            <information v-if="activeName === '1'"></information>
          </el-tab-pane>
          <el-tab-pane label="图片上传" name="2">
            <uploadImg v-if="activeName === '2'"></uploadImg>
          </el-tab-pane>
          <el-tab-pane label="设置价格" name="3">
            <setPrice v-if="activeName === '3'"></setPrice>
          </el-tab-pane>
          <el-tab-pane label="配套服务" name="4">
            <supportService v-if="activeName === '4'"></supportService>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div> -->

  </div>
</template>
<script type="text/ecmascript-6">
import showBanner from '@/components/showBanner/showBanner'
import information from './information'
import uploadImg from './uploadImg'
import setPrice from './setPrice'
import supportService from './supportService'
import { getData } from '@/assets/js/mixin'
export default {
  name: 'addSpace',
  components: {
    information,
    uploadImg,
    setPrice,
    supportService,
    showBanner
  },
  mixins: [getData],
  data() {
    return {
      activeNum: 1,
      spaceInfoformList: {}
    }
  },
  watch: {
  },
  methods: {
    // handleClick(tab, event) {
    //   console.log(tab, event)
    // }
    // 基本信息下一步
    onSelectStep(val) {
      this.activeNum = 2
    },
    //  图片上传上一步
    onPrevStepScd() {
      this.activeNum = 1
    },
    //  图片上传下一步
    onNextStepScd() {
      this.activeNum = 3
    },
    // 设置价格上一步
    onPrevStepThd() {
      this.activeNum = 2
    },
    // 设置价格下一步
    onNextStepThr() {
      this.activeNum = 4
    },
    // 配套服务上一步
    onPrevStepFou() {
      this.activeNum = 3
    },
    // 确认添加
    addSpace() {}
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/variable'
.addSpace
  margin 16px
  background #fff
  min-height 800px
  padding-bottom 28px
  .content
    padding 16px
    display flex
    justify-content center
  .rowBox
    width 400px
    display flex
    flex-flow row nowrap
    .changeRow
      display flex
      flex-flow row wrap
      align-items center
      .box
        padding 3px 5px
        height 24px
        background rgba(44, 125, 255, 0.1)
        border-radius 3px
        display flex
        align-items center
        justify-content center
        color #2C7DFF
        margin 0 8px 8px 0
</style>
